<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听子组件事件</title>

</head>

<script src="node_modules/vue/dist/vue.js"></script>

<body>
<h1>v-on:click="$emit('enlarge-text') 调用内建的 $emit 方法 并传入事件名称来触发一个事件：</h1>
<h1>v-on:enlarge-text="postFontSize += 0.1" 监听器,父级组件就会接收该事件;</h1>
<div id="blog-posts-events-demo"> <!-- 父级组件-->
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize += 0.1"
        ></blog-post><!--有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。-->
    </div>
</div>
<script>
    Vue.component('blog-post', {
        props: ['post'],
        /**
         * 同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件：
         *
         */
        template: `<div class="blog-post">
          <h3>{{ post.title }}</h3>
          <button v-on:click="$emit('enlarge-text')">
            Enlarge text
          </button>
          <div v-html="post.content"></div>
        </div>`
    })

    new Vue({
        el: "#blog-posts-events-demo",
        data: {
            posts: [
                {title: "张三", content:"张三丰的爱恨情仇"},
                {title: "李四", content: "李四晋升明星员工"},
                {title: "王五", content: "王五娶媳妇了  "}
            ],
            postFontSize: 1
        }

    })

</script>

<hr>
<h1>使用事件抛出一个值</h1>
<div id="blog-posts-events-demo2"> <!-- 父级组件-->
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post-2
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize += $event"
        ></blog-post-2><!--有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。-->
    </div>
</div>
<script>
    Vue.component('blog-post-2', {
        props: ['post'],
        /**
         * 同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件：
         * 有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。
         * 这时可以使用 $emit 的第二个参数来提供这个值：
         *
         */
        template: `<div class="blog-post">
          <h3>{{ post.title }}</h3>
          <button v-on:click="$emit('enlarge-text', 0.1)">
            Enlarge text
          </button>
          <div v-html="post.content"></div>
        </div>`
    })

    new Vue({
        el: "#blog-posts-events-demo2",
        data: {
            posts: [
                {title: "张三", content:"张三丰的爱恨情仇"},
                {title: "李四", content: "李四晋升明星员工"},
                {title: "王五", content: "王五娶媳妇了  "}
            ],
            postFontSize: 1
        }

    })

</script>


<hr>
<h1>在组件上使用 v-model</h1>
<div id="custom-input-demo">

    <!--<custom-input
            v-bind:value="searchText"
            v-on:input="searchText = $event"
    ></custom-input>-->
<!-- 等价于 -->
    <custom-input v-model="searchText"></custom-input>
    {{searchText}}
</div>
<script>
    // 定义组件
    /**
     * 为了让它正常工作，这个组件内的 <input> 必须：

     将其 value 特性绑定到一个名叫 value 的 prop 上
     在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
     */
    Vue.component('custom-input', {
        props: ['value'],
        template: `
            <input
              v-bind:value="value"
              v-on:input="$emit('input', $event.target.value)"
            >
          `
    })
    // 实例化Vue对象
    new Vue({
        el: "#custom-input-demo",
        data: {
            searchText: ''
        }
    });


</script>

</body>

</html>